<ion-view view-title="{{viewTitle}}">
    <ion-content scroll="false">
        <ion-content>
            <!--
                spinner: 详见 ion-spinner(http://ionicframework.com/docs/api/directive/ionSpinner/)
            -->
            <ion-refresher pulling-text="下拉刷新"
                           spinner="lines"
                           on-pulling="$ctrl.doPulling()"
                           on-refresh="$ctrl.doRefresh()">
            </ion-refresher>
            <!--
                collection-repeat: 比 ng-repeat 性能好, 专门渲染大数据的. (不仅仅是只能用在 ion-list 上)
                    附带属性:
                        item-width: repeat item 的宽度
                        item-height: repeat item 的高度
                        item-render-buffer: 在可见的 list 之前和之后的预加载 item 数量, 默认3.如果有很多图片要加载可以设置大点, 但是设置太大了会影响性能, 需要权衡.
                        force-refresh-images: 滚动时强制刷新图片. image 的 src 改变后需要设置成 true. 会有部分性能遗失.
                    注意:
                        1.必须是[数组];
                        2.且不能使用 一次绑定(::)表达式;
                        3.如果 item-height/item-width 属性不支持就会假定每个 item 都跟 第一个 item 的尺寸一样.
                delegate-handle: 详见 $ionicListDelegate
                show-delete: 是否显示每个 item 中的 delete button
                show-reorder: 是否显示每个 item 中的 reorder button
                can-swipe: 是否允许每个 item 通过滑动显示 option button. 默认 true.
            -->
            <ion-list delegate-handle="myList" show-delete="$ctrl.showDelete" show-reorder="$ctrl.showReorder" can-swipe="true">
                <ion-item collection-repeat="item in $ctrl.items track by $index" class="item-remove-animate">
                    item {{item}}
                    <ion-delete-button class="ion-minus-circled" ng-click="$ctrl.deleteItem($index)"></ion-delete-button>
                    <!-- on-reorder: 拖动完成时触发, 可以给定参数 $fromIndex, $toIndex (属于当前 scope 下的变量) -->
                    <ion-reorder-button class="ion-navicon" on-reorder="$ctrl.reorder(item, $fromIndex, $toIndex)"></ion-reorder-button>
                    <ion-option-button class="button-info button-assertive"> 编辑</ion-option-button>
                    <ion-option-button class="button-info button-positive"> 分享</ion-option-button>
                </ion-item>
            </ion-list>
            <!--
                on-infinite: 滚动到底部时触发
                distance: scroll 到底部的距离超过 distance 时触发 on-infinite, 默认 1%
                immediate-check: 页面一加载时如果满足 on-infinite 条件是否立即执行, 默认 true

                注意: 如果没有更多数据可以加载时, 可以把 ion-infinite-scroll 元素删掉
            -->
            <ion-infinite-scroll ng-if="!$ctrl.noMoreData"
                                 on-infinite="$ctrl.loadMoreData()"
                                 immediate-check="false">

            </ion-infinite-scroll>
        </ion-content>
        <ion-footer-bar align-title="center" class="bar-light">
            <button class="button button-clear button-assertive" ng-click="$ctrl.showDelete = !$ctrl.showDelete;$ctrl.showReorder=!1;"> 删除</button>
            <button class="button button-clear button-positive" ng-click="$ctrl.showReorder = !$ctrl.showReorder;$ctrl.showDelete=!1;"> 排序</button>
        </ion-footer-bar>
    </ion-content>
</ion-view>